<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 动画
         name:设置动画的名称
         duration:设置动画的持续时间
         timing-function:设置动画效果的速率如下
         delay:设置动画的开始时间
         iteration-count:设置动画循环的次数 infinite为无线次数的循环
         direction:设置动画播放的方向
         animation-play-state:控制动画的播放状态，running代表播放，而paused代表停止播放
         timing-funcation： 的值 ease：逐渐变慢（默认） linear:匀速 ease-in：加速 ease-out：减速 ease-in-out:先加速后减速
         direction:的值 normal：默认的值为normal表示向前播放  alternate：动画播放在第偶数次向前播放，第奇数次向反方向播放 

        */
        @keyframes myAnim {
            0% {
                /*透明度*/
                opacity: 0.1;
                background-color: red;

            }

            50% {
                opacity: 0.4;
                background-color: aqua;
            }

            70% {
                opacity: 0.7;
                background-color: aquamarine;
            }

            100% {
                opacity:1;
                background-color: rgb(255, 127, 197);
            }
        }

        .layout {
            width: 200px;
            height: 200px;
            background-color: red;
            animation: myAnim 10s linear 0s infinite;
        }

        .layout:hover {
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div class="layout">

    </div>




</body>

</html>